<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">在线监测</span>
      </div>
    </div>
    <div class="flex1 flex-col-cb ww100 pplr6 tc">
      <div class="flex-sc flex1 ww100 bodb-i20-1 pplr8">
        <img class="w50" src="@/assets/images/a1.png" />
        <div class="flex-sc flex1 ppl8 f12">
            <div class="layout-col flex1">
				<span class="mb15 white">配电房</span>
				<span class="f18 i21 fw">
					{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.stationNum)?publicStore._public.count.stationNum:0}}
				</span>
			</div>
			<div class="layout-col flex1">
				<span class="mb15 i3">·<span class="mr4">在线</span></span>
				<span class="f18 white fw">
					{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.stationOnline)?publicStore._public.count.stationOnline:0}}
				</span>
			</div>
			<div class="layout-col flex1">
				<span class="mb15 i6">·<span class="mr4">告警</span></span>
				<span class="f18 white fw">
					{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.stationAlarm)?publicStore._public.count.stationAlarm:0}}
				</span>
			</div>
        </div>
      </div>
		<div class="flex-sc flex1 ww100 bodb-i20-1 pplr8">
			<img class="w50" src="@/assets/images/d10.png" />
			<div class="flex-sc flex1 ppl8 f12">
				<div class="layout-col flex1">
					<span class="mb15 white">设备</span>
					<span class="f18 i21 fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorNum)?publicStore._public.count.sensorNum:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i3">·<span class="mr4">在线</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorOnline)?publicStore._public.count.sensorOnline:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i6">·<span class="mr4">告警</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorAlarm)?publicStore._public.count.sensorAlarm:0}}
					</span>
				</div>
			</div>
		</div>
		<div class="flex-sc flex1 ww100  bodb-i20-1 pplr8">
			<img class="w50" src="@/assets/images/a3.png" />
			<div class="flex-sc flex1 ppl8 f12">
				<div class="layout-col flex1">
					<span class="mb15">环境传感器</span>
					<span class="f18 i21 fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType1Num)?publicStore._public.count.sensorType1Num:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i3">·<span class="mr4">在线</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType1Online)?publicStore._public.count.sensorType1Online:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i6">·<span class="mr4">告警</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType1Alarm)?publicStore._public.count.sensorType1Alarm:0}}
					</span>
				</div>
			</div>
		</div>
		<div class="flex-sc flex1 ww100  bodb-i20-1 pplr8">
			<img class="w50" src="@/assets/images/a4.png" />
			<div class="flex-sc flex1 ppl8 f12">
				<div class="layout-col flex1">
					<span class="mb15">监测传感器</span>
					<span class="f18 i21 fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType2Num)?publicStore._public.count.sensorType2Num:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i3">·<span class="mr4">在线</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType2Online)?publicStore._public.count.sensorType2Online:0}}
					</span>
				</div>
				<div class="layout-col flex1">
					<span class="mb15 i6">·<span class="mr4">告警</span></span>
					<span class="f18 white fw">
						{{!isNull(publicStore._public.count) && !isNull(publicStore._public.count.sensorType2Alarm)?publicStore._public.count.sensorType2Alarm:0}}
					</span>
				</div>
			</div>
		</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const state = reactive({
	  ...publicStore.$state,
  })
</script>

<style scoped lang="scss">

</style>
